<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
	
	.di{
		/*width:00px;
		height:300px;*/
		margin:300px auto;
		overflow:hidden;
		border-radius:10px;
		background: rgb(0, 0, 0,.5);

		}

	#for{
		text-align:center;
	}
	input[type=text]{	
		height: 50px;
		width: 300px;

		font-size: 25px;
		text-align: center;

		}
	input[type=password]{
		height: 50px;
		width: 300px;
		border: 3px;
		margin-top: 30px;
		font-size: 25px;
		text-align: center;

	}
	input[type=button]{
		margin-top:30px;
		cursor: pointer;
		font-size: 20px;
		background-color: #fff;
	}
	.denglu input{
		width:150px;
		height: 50px;
		border-radius:6px;
		border-style:none;
		text-align: center;

	}
	p{
		
		color: red;
		position: absolute;
		display: none;
		margin-left: 800px;
    	margin-top: 5px;
	}
</style>
<body background="img/100.jpg" style="background-size: 100% auto;">
<div class="di">
	<form id="for">
		<h1>登陆</h1>
    	<input type="text" name="请输入账号" id="ipu1" value="" maxlength="10" placeholder="Username" align="" /><br />
		<p id="p1">*账号错误</p>	
        <input type="password" name="请输入密码" id="ipu2" value="" placeholder="password" pattern="[0-9]" />
        <p id="p2">*密码错误</p>
        <div class="denglu">
        	<input type="button" name="" value="注册" id="btn" />
        	<input type="button" name="注册" value="登陆" id="btn1" />
        </div>
    </form>
</div>
</body>
<script>
	window.onload = function(){
		function $(id){
			return document.getElementById(id);
		}
		$("btn").onclick = function(){
			if($("ipu1").value == ""){
				$("p1").innerHTML = "账号不能为空";
				$("p1").style.display = "block";		
			}else if($("ipu2").value == ""){
				$("p2").innerHTML= "密码不能为空";
				$("p2").style.display = "block";
			}else{
				$("p1").style.display = "none";
				$("p2").style.display = "none";
				alert("注册成功");
				$("ipu1").value = '';
				$("ipu2").value = '';
			}
			var username = $("ipu1").value;
			var password = $("ipu2").value;
			var Arr = [];
			Arr[0] = username;
			Arr[1] = password;

		}

		$("btn1").onclick = function(){
			if($("ipu1").value == ""){
				$("p1").innerHTML = "账号不能为空";
				$("p1").style.display = "block";		
			}else if($("ipu2").value == ""){
				$("p2").innerHTML= "密码不能为空";
				$("p2").style.display = "block";
			}else{
				$("p1").style.display = "none";
				$("p2").style.display = "none";
			}

			if($("ipu1").value == "123" && $("ipu2").value == "123"){
				alert("登陆成功");
			}
		}

}

</script>
</html>
